import React, { useRef, useState } from 'react';
import { useAccess, useModel } from 'umi';
import { DrawerForm, PageContainer } from '@ant-design/pro-components';
import { Button, Descriptions, Divider, Spin, Upload, message } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
interface DetailsReportrops {
    record: {};
    onClose: () => void;
}

const DetailsReport: React.FC<DetailsReportrops> = ({ record, onClose }) => {
    const access = useAccess();
    const [details, setDetailsState] = useState({content:'1dfjaoidweno'});
    const { initialState } = useModel('@@initialState');
    const { currentUser } = initialState || {};
    const [previewOpen, setPreviewOpen] = useState(false);
    const [previewData, setPreviewData] = useState<{
        id: string;
        name: string;
        mimeType: string;
        url?: string;
    }>();
    const [previewOnlineUrl, setPreviewOnlineUrl] = useState<string>();
    const iframeRef = useRef(null);
    const [previewLoading, setPreviewLoading] = useState(true);
    return <>
        <DrawerForm
            key={`drawer_form_detail_report`}
            title={record?.title}
            trigger={
                <a>{record?.title}</a>
            }
            autoFocusFirstInput
            drawerProps={{
                size: 'large',
                forceRender: true,
                destroyOnClose: true,
            }}
            submitter={false}
            onVisibleChange={(visible) => {
                // if (visible) {
                //     getSubmitDetails();
                // } else {
                //     onClose();
                // }
            }}
        >
            <Spin
                style={{
                    textAlign: 'center',
                }}
                spinning={details === undefined}
            >
                {details !== undefined && (
                    <>
                        <Descriptions>
                            <Descriptions.Item label="报送人">{details?.articleAccountName}</Descriptions.Item>
                            <Descriptions.Item label="报送时间">{details?.articleAccountPhone}</Descriptions.Item>
                        </Descriptions>


                        <Divider />

                        <br />
                        {details?.content ? (
                            <div
                                dangerouslySetInnerHTML={{
                                    __html: `${details?.content}`,
                                }}
                            />
                        ) : (
                            <>暂无内容</>
                        )}

                        {details?.articleAttachments && details?.articleAttachments.length > 0 && (
                            <>
                                <Divider />
                                <div
                                    style={{
                                        textAlign: 'right',
                                    }}
                                >
                                    <Button
                                        type="primary"
                                        key="import"
                                        size="small"
                                        icon={<DownloadOutlined />}
                                        onClick={() => {
                                            details?.articleAttachments.forEach(function (item) {
                                                window.open(item.content, '_blank');
                                            });
                                        }}
                                    >
                                        全部下载
                                    </Button>
                                </div>

                                <Upload
                                    listType="picture"
                                    multiple
                                    fileList={details?.articleAttachments.map((item) => {
                                        return {
                                            uid: item.id,
                                            name: item.name,
                                            url: item.content,
                                            mimeType: item.mimeType,
                                            status: 'done',
                                        };
                                    })}
                                    showUploadList={{
                                        downloadIcon: (
                                            <div style={{ marginLeft: '-100px', padding: '17px 0', marginTop: '-15px' }}>
                                                <DownloadOutlined
                                                    style={{
                                                        marginRight: '10px',
                                                    }}
                                                />
                                                点击下载
                                            </div>
                                        ),
                                        showRemoveIcon: false,
                                        showDownloadIcon: true,
                                    }}
                                    onPreview={async (file: UploadFile) => {
                                        setPreviewData({
                                            id: file.uid,
                                            name: file.name,
                                            mimeType: file.mimeType,
                                            url: file.url,
                                        });
                                        setPreviewOpen(true);
                                    }}
                                />
                                <DrawerForm
                                    title={previewData?.name}
                                    drawerProps={{
                                        width: '100%',
                                        destroyOnClose: true,
                                    }}
                                   visible={previewOpen}
                                    onVisibleChange={async (visible) => {
                                        if (visible) {
                                            if (
                                                previewData?.mimeType !== null &&
                                                previewData?.mimeType?.indexOf('image') > -1
                                            ) {
                                                //图片预览
                                            } else {
                                                setPreviewLoading(true);

                                                // const response = await cuesAttachmentPreview({
                                                //     id: previewData?.id,
                                                // });

                                                // if (response.code === 0) {
                                                //     setPreviewOnlineUrl(response.data);
                                                // } else {
                                                //     message.error('暂时无法预览');
                                                //     setPreviewLoading(false);
                                                // }
                                            }
                                        } else {
                                            setPreviewOpen(false);
                                            setPreviewData(undefined);
                                            setPreviewOnlineUrl(undefined);
                                        }
                                    }}
                                    submitter={{
                                        searchConfig: {
                                            submitText: '下载',
                                        },
                                    }}
                                    onFinish={async (values) => {
                                        window.open(previewData?.url, '_blank');
                                    }}
                                >
                                    <Alert
                                        style={{
                                            marginBottom: 20,
                                        }}
                                        message="部分文件系统可能暂不支持在线预览，建议下载到本地"
                                        type="warning"
                                        showIcon
                                    />
                                    {previewData?.mimeType !== null &&
                                        previewData?.mimeType?.indexOf('image') > -1 ? (
                                        <Image width="100%" src={previewData?.url} />
                                    ) : (
                                        <Spin spinning={previewLoading}>
                                            <iframe
                                                ref={iframeRef}
                                                src={previewOnlineUrl}
                                                height={200}
                                                width="100%"
                                                frameBorder="0"
                                                // scrolling="false"
                                                allowFullScreen={true}
                                            // scrolling={'no'}
                                            />
                                        </Spin>
                                    )}
                                </DrawerForm>
                            </>
                        )}
                    </>
                )}
            </Spin>
        </DrawerForm>
    </>;
};
export default DetailsReport;
